<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>媒介查询</title>
	<style type="text/css">
	
	/*监听浏览器的宽度小于500px时,修改body元素的背景色*/
	/*@media only screen and (max-width: 500px){
	body{
		background-color: pink;
	}
	}
	@media only screen and (min-width:800px ){
		body{
			background-color: red;
		}
	}
	@media only screen and (min-width: 500px) and (max-width: 800px){
		body{
			background-color: cyan;
		}
	}
	@media*/</style>
	<link rel="stylesheet" media="screen and (max-width: 500px)" href="mystylesheet.css">
</head>
<body>
	<!-- 媒介查询
	监听对象的宽度或者高度,并设置一个临界值,当达到临界值时,触发媒介查询里的对应代码,对页面的布局做出修改 
	语法:
	@media   监听的设置类型 and(设置的临界值){
	需要修改的代码...
	}
	监听的设备类型:
	1.only screen 手机,电脑,平板
	2.print 打印机
	3.speech 读音设备
	4.all 所有设备

媒介查询的代码一般写到所有的样式的最后

-->
<script type="text/javascript">
	var  a = "213";
	 var b= 24541;
</script>
</body>
</html>